<template>
  <div class="page">
    <!-- 侧边导航栏 -->
    <nav class="sidebar">
      <ul>
        <li @click="navigateTo('/welcome')">基地详情</li>
          <li @click="navigateTo('/BaseAdd')">基地添加</li>
          <li @click="navigateTo('/BaseDelete')">基地删除</li>
          <li @click="navigateTo('/BaseEdit')">基地修改</li>
        <!-- 添加其他导航选项 -->
      </ul>
    </nav>

    <!-- 右侧内容区域 -->
    <div class="content">
      <button class="test_goBack" @click="goBack">返回登录</button>
      <h1>欢迎登录基地管理系统</h1>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <p>
        <span class="head1">基地名称：</span>
        <span class="head2">基地代码：</span>
      </p>
     
      <select class="select1" @change="fetchData" style="background-color: rgb(194, 187, 187);">
        <option value="null">null</option>
        <option v-for="name in baseNames" :key="name" :value="name">{{ name }}</option>
      </select>
      
        <input disabled class="select2" v-model="BaseCode" placeholder="BaseCode" readonly style="background-color: rgb(194, 187, 187);">
      
      
        <p>
        <span class="head1">基地管理员：</span>
        <span class="head2">其他管理员联系方式：</span>
      </p>
      <p >
        <input disabled  class="select1" v-model="BaseManager" placeholder="BaseManager"  readonly style="background-color: rgb(194, 187, 187);">
        
        <input disabled  class="select2" v-model="OtherManager" placeholder="OtherManager" readonly style="background-color: rgb(194, 187, 187);">
       
      </p>
      <p class="head0">基地管理员邮箱：</p>
      <p class="test0">
        <input disabled  class="select1" v-model="ManagerMail" placeholder="ManagerMail" readonly style="background-color: rgb(194, 187, 187);">
        
       
      </p>

      <p>
        <span class="head1">区域-中文：</span>
        <span class="head2">培训基地-中文：</span>
      </p>
      <p>
        <input disabled  class="select1" v-model="AreaZh" placeholder="AreaZh" readonly style="background-color: rgb(194, 187, 187);">
        
        <input disabled  class="select2" v-model="CourseBaseZh" placeholder="CourseBaseZh" readonly style="background-color: rgb(194, 187, 187);">
       
      </p>      
      <p>
        <span class="head1">区域-英文：</span>
        <span class="head2">培训基地-英文：</span>
      </p>
      <p class="test">
        <input disabled t class="select1" v-model="AreaEn" placeholder="AreaEn"  readonly style="background-color: rgb(194, 187, 187);">
       
        <input disabled  class="select2" v-model="CourseBaseEn" placeholder="CourseBaseEn" readonly style="background-color: rgb(194, 187, 187);">
       
        </p>   
      <p>
        <span class="head1">区域-中文繁体：</span>
        <span class="head2">培训基地-中文繁体：</span>
      </p>
      <p class="test">
        <input disabled  class="select1" v-model="AreaF" placeholder="AreaF" readonly style="background-color: rgb(194, 187, 187);">
        
        <input disabled  class="select2" v-model="CourseBaseF" placeholder="CourseBaseF"  readonly style="background-color: rgb(194, 187, 187);">
       
      </p>   
      <p>
        <span class="head1">培训地点-中文：</span>
        <span class="head2">基地描述-中文：</span>
      </p>
      <p class="test">
        <input disabled  class="select1" v-model="PosZh" placeholder="PosZh" readonly style="background-color: rgb(194, 187, 187);">
      
        <input disabled  class="select2" v-model="BaseDesZh" placeholder="BaseDesZh" readonly style="background-color: rgb(194, 187, 187);">
     
      </p>   
      <p>
        <span class="head1">培训地点-英文：</span>
        <span class="head2">基地描述-英文：</span>
      </p>
      <p class="test">
        <input disabled  class="select1" v-model="PosEn" placeholder="PosEn" readonly style="background-color: rgb(194, 187, 187);">
      
        <input disabled  class="select2" v-model="BaseDesEn" placeholder="BaseDesEn" readonly style="background-color: rgb(194, 187, 187);">
      
      </p> 
      <p>
        <span class="head1">培训地点-中文繁体：</span>
        <span class="head2">基地描述-中文繁体：</span>
      </p>
      <p class="test">
        <input disabled  class="select1" v-model="PosF" placeholder="PosF" readonly style="background-color: rgb(194, 187, 187);">
     
        <input disabled  class="select2" v-model="BaseDesF" placeholder="BaseDesF" readonly style="background-color: rgb(194, 187, 187);">
    
      </p> 
       <p>
        <span class="head1">创建时间：</span>
        <span class="head2">创建人：</span>
      </p>
      <p class="test">
        <input disabled  class="select1" v-model="CreateTime" placeholder="CreateTime" readonly style="background-color: rgb(194, 187, 187);">
     
        <input disabled  class="select2" v-model="Creater" placeholder="Creater" readonly style="background-color: rgb(194, 187, 187);">
      
      </p> 
      <p class="head0">更新人：</p>
      <p class="test">
        <input disabled  class="select1" v-model="Updater" placeholder="Updater" readonly style="background-color: rgb(194, 187, 187);">
      
      </p>
      

    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import axios from 'axios';

// window.onload = function() {
//       // 使用alert函数弹出对话框
//       alert('登录大成功！');
//     };
    
export default {

  data() {
    return {
      BaseCode: '',
      BaseName: '',
      OtherManager: '',
      BaseManager: '',
      ManagerMail: '',
      CourseBaseZh: '',
      AreaZh: '',
      CourseBaseEn: '',
      AreaEn: '',
      CourseBaseF: '',
      AreaF: '',
      BaseDesZh: '',
      PosZh: '',
      BaseDesEn: '',
      PosEn: '',
      BaseDesF: '',
      PosF: '',
      Creater: '',
      CreateTime: '',
      Updater: '',
      baseNames: [], // 用于存储从后端获取的基地名称
    };
  },
  mounted() {
    this.getBaseNames(); // 组件加载时获取数据
  },

  setup() {
    const router = useRouter();

    const navigateTo = (path) => {
      router.push(path);
    };

    return { navigateTo };
  },
  methods: {
    getBaseNames() {
      axios.get('http://localhost:5000/get_baseName')
        .then(response => {
          // 假设响应数据是一个列表，每个元素都有一个 BaseName 属性
          this.baseNames = response.data.map(item => item.BaseName);
        })
        .catch(error => {
          console.error('请求错误:', error);
        });
    },

    fetchData() {
      axios.post('http://localhost:5000/get_data')
        .then(response => {
          this.BaseCode = response.data.BaseCode;
          this.BaseName = response.data.BaseName;
          this.OtherManager = response.data.OtherManager;
          this.BaseManager = response.data.BaseManager;
          this.ManagerMail = response.data.ManagerMail;
          this.CourseBaseZh = response.data.CourseBaseZh;
          this.AreaZh = response.data.AreaZh;
          this.CourseBaseEn = response.data.CourseBaseEn;
          this.AreaEn = response.data.AreaEn;
          this.CourseBaseF = response.data.CourseBaseF;
          this.AreaF = response.data.AreaF;
          this.BaseDesZh = response.data.BaseDesZh;
          this.PosZh = response.data.PosZh;
          this.BaseDesEn = response.data.BaseDesEn;
          this.PosEn = response.data.PosEn;
          this.BaseDesF = response.data.BaseDesF;
          this.PosF = response.data.PosF;
          this.Creater = response.data.Creater;
          this.CreateTime = response.data.CreateTime;
          this.Updater = response.data.Updater;

          // console.log(response.data)
        })
        .catch(error => {
          console.error('请求错误:', error);
        });
    }
  },



};
</script>

<style scoped>
/* 样式调整，使导航栏在左侧并占据整个左侧高度 */
.page {
  display: flex;
}

.select1{
  width:20% ;
  margin-left: -28%;
  
}
.select2{
  width:20% ;
  margin-left: 10%;
}
.head1 {
  margin-left: -28%;
}

.head2 {
  margin-left: 20%;
}
.sidebar {
  width: 10%;
  /* 可根据需求调整宽度 */
  background-color: #333;
  color: white;
  height: auto;
  /* 100%视窗高度，占据整个左侧高度 */
  overflow-y: auto;
  /* 如果内容超出高度，添加滚动条 */
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar ul li {
  padding: 10px;
  cursor: pointer;
}

.head0{
  margin-left: -25%;
}



.content {
  flex: 1;
  /* 填充剩余空间 */
  padding: 20px;
  color: rgb(0, 0, 0);
  background-color: rgb(245, 245, 245);

}


.test_goBack {
  margin-right: -90%;
}


/* 样式调整，使导航选项看起来更明显 */
.sidebar ul li:hover {
  background-color: #555;
}
</style>